<template>
      <div>
            <el-scrollbar>
                  <el-table :data="tableData">
                        <el-table-column label="申请人" prop="persona"/>
                        <el-table-column label="被申请人" prop="personb"/>
                        <el-table-column label="状态" prop="state">
                              <template v-slot="scope">
                                    <el-tag
                                              :type="scope.row.state=== 0 ? 'primary' :'success' "
                                              disable-transitions
                                    >{{ scope.row.state === 0 ? '未受理' : '已处理' }}
                                    </el-tag
                                    >
                              </template>
                        </el-table-column>
                        <el-table-column label="操作" prop="operate">
                              <template v-slot="scope">
                                    <el-button size="small" type="success" @click="modify(scope.row)">详情</el-button>
                                    <el-button size="small" type="warning" @click="doWrit(scope.row)">仲裁</el-button>
                              </template>
                        </el-table-column>
                  </el-table>
            </el-scrollbar>

            <el-pagination v-model:current-page="pageNum"
                           v-model:page-size="pageSize"
                           :page-sizes="[2, 5, 10,20]"
                           :total="total"

                           layout="total, sizes, prev, pager, next, jumper"
                           style="position: relative  ;bottom: 10%;left: 350px"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
            />

            <el-dialog
                      v-model="dialogVisible"
                      :before-close="handleClose"
                      style="text-align: center;width: 500px"
                      title="案件详情"
            >
                  <el-form ref="form" :model="form" :rules="rules" label-width="auto" style="max-width: 600px">
                        <el-form-item label="申请人" prop="persona">
                              <el-col :span="22">
                                    <el-input v-model="form.persona"/>
                              </el-col>
                        </el-form-item>
                        <el-form-item label="身份证号" prop="carda">
                              <el-col :span="22">
                                    <el-input v-model="form.carda"/>
                              </el-col>
                        </el-form-item>
                        <el-form-item label="被申请人" prop="personb">
                              <el-col :span="22">
                                    <el-input v-model="form.personb"/>
                              </el-col>
                        </el-form-item>
                        <el-form-item label="身份证号" prop="cardb">
                              <el-col :span="22">
                                    <el-input v-model="form.cardb"/>
                              </el-col>
                        </el-form-item>
                        <el-form-item label="状态" prop="state">
                              <el-col :span="22">
                                    <el-input v-model="form.state"/>
                              </el-col>
                        </el-form-item>
                        <el-form-item label="案件详情" prop="content">
                              <el-col :span="22">
                                    <el-input v-model="form.content" type="textarea"/>
                              </el-col>
                        </el-form-item>
                  </el-form>
                  <br>
                  <template #footer>
                        <div class="dialog-footer" style="text-align: center">
                              <el-button @click="dialogVisible = false">Cancel</el-button>
                        </div>
                  </template>
            </el-dialog>
            <el-dialog
                      v-model="dialogWritVisible"
                      style="text-align: center;width: 500px"
                      title="仲裁意见"
            >
                  <el-scrollbar>
                        <el-form ref="form" :model="form" style="width: auto;height: auto">
                              <el-form-item label="" prop="reply">
                                    <el-col :span="22">
                                          <el-input v-model="form.reply" type="textarea"/>
                                    </el-col>
                              </el-form-item>
                              <el-form-item label="状态" prop="state" style="display: none">
                                    <el-col :span="22">
                                          <el-input v-model="form.state" value="1"/>
                                    </el-col>
                              </el-form-item>
                              <el-form-item label="" prop="operate" style="position: relative;left: 200px">
                                    <template v-slot="scope">
                                          <el-button size="default" type="primary" @click="writConfirm(scope.row)">
                                                确认
                                          </el-button>
                                    </template>
                              </el-form-item>
                        </el-form>
                  </el-scrollbar>
            </el-dialog>
      </div>
</template>

<script>
export default {
      name: "adminLawCaseManage",
      data() {
            return {
                  dialogVisible: false,
                  dialogWritVisible: false,
                  form: {
                        id: '',
                        personA: '',
                        cardA: '',
                        personB: '',
                        cardB: '',
                        content: '',
                        state: 0,
                        reply: '',
                        DT: '',
                        flag: ''
                  },
                  tableData: [],
                  pageSize: 5,
                  pageNum: 1,
                  total: 0,
            }
      },
      methods: {
            loadGet() {
                  this.$axios('http://localhost:8088/writ/list').then(res => res.data).then(res => {
                        console.log(res)
                  })
            },
            loadPost() {
                  this.$axios.post('http://localhost:8088/writ/listPageResult', {
                        pageSize: this.pageSize,
                        pageNum: this.pageNum,
                        param: {}

                  }).then(res => res.data).then(res => {
                        console.log(res)
                        if (res.code === 200) {
                              // alert("是200")
                              this.tableData = res.data
                              this.total = res.total
                              console.log(res.total)
                        } else {
                              alert("不是200")
                        }
                  })
            },
            doWrit(row) {
                  console.log(row)
                  //      赋值到表单
                  this.dialogWritVisible = true
                  this.$nextTick(() => {
                        this.form = row
                  })
            },
            modify(row) {
                  console.log(row)
                  //      赋值到表单
                  this.dialogVisible = true
                  this.$nextTick(() => {
                        this.form = row
                  })
            },
            writConfirm(){
                  this.form.state=1
                  this.$axios.post('http://localhost:8088/writ/update', this.form).then(res => res.data).then(res => {
                        console.log(res)
                        if (res.code === 200) {

                              this.$message({
                                    message: 'Congrats, this is a success message.',
                                    type: 'success',
                              })
                              this.dialogWritVisible = false
                              this.loadPost()
                        } else {
                              // alert("不是200")
                              this.$message({
                                    message: 'Regret, this is a error message.',
                                    type: 'danger',
                              })

                        }
                  })
            },
            handleSizeChange(val) {
                  console.log(`${val} items per page`)
                  this.pageNum = 1
                  this.pageSize = val
                  this.loadPost()
            },
            handleCurrentChange(val) {
                  console.log(`current page: ${val}`)
                  this.pageNum = val
                  this.loadPost()
            },
            resetParam() {
                  this.name = ''
                  this.sex = ''
            }
      },
      mounted() {
            // this.loadGet();
            this.loadPost();
      }
}
</script>

<style scoped>
.el-textarea {
      height: 88px;
}

:deep(.el-textarea__inner) {
      height: 100px;
}

</style>